<template>
  <div class="flow-row">
    <div class="flow-box">
      <div class="flow-item" :class="{ 'flow-item-active': state.isActive }" @click="!readable && open('flowWriteSetting', node)">
        <div class="flow-node-box" :class="{ 'has-error': node.error }">
          <div class="node-name" :class="nameClass(node, 'node-fill')">
            <EditName v-model="state.name" />
            <SvgIcon  name="ele-EditPen" :size="20" style="margin-left: 10px;" />
          </div>
          <div class="node-main">
            <span v-if="node.content">
              表单权限:
              <el-tooltip effect="dark" placement="top" :content="node.content">
                {{ node.content }}
              </el-tooltip>
            </span>
            <span v-else class="hint-title">默认表单全可编辑</span>
          </div>
          <!-- 错误提示 -->
          <SvgIcon v-if="node.error" name="ele-WarningFilled"  class="node-error" />
          <div v-if="!props.readable && !state.deletable&& node.type == 6" class="close-icon">
            <SvgIcon  name="ele-CircleClose"  @click.stop="state.deletable = true" />
          </div>
          <!-- 删除提示 -->
          <DeleteConfirm :node="node" v-model="state.deletable"/>
        </div>
      </div>
      <FlowAddNode :node="node" :nodeType="6" :readable="readable" />
    </div>
  </div>
</template>
<script lang="ts" setup name="WriteNode">
  import FlowAddNode from '../add/index.vue';
  import EditName from '../../common/EditName.vue';
  import DeleteConfirm from '../../common/DeleteConfirm.vue';
  const props = defineProps({
    node: {
      type: Object,
      default: function() {
        return {};
      },
    },
    readable: {
      type: Boolean,
      default: true,
    },
  });
  const state=reactive({
    isActive: false,
    deletable:false,
    name:props.node.name,
  })
  watch(
    () => state.name,
    (val: any) => {
      // 将对应的审批节点的添加按钮开启
      let currNode=props.node
      console.log(val)
      $store.flow.UP_NODE( { currNode, field: 'name', value: val });
    },
    {
      deep: true,
    }
  );
  /**
    * 节点头部样式
    * @returns
    */
  function nameClass(node, defaultStyle)  {
    if (node.status == -1) {
      return defaultStyle;
    }
    return { 'node-status-not': node.status == 0, 'node-status-current': node.status == 1, 'node-status-complete': node.status == 2 };
  }
</script>
